import React, { useState, useEffect } from 'react'
import { useNavigate } from 'react-router-dom';
import './index.css'
import axios from './axios'

// import './iconfont/iconfont.css'
import { CustomerServiceOutlined, SettingFilled, CreditCardOutlined, TruckOutlined } from '@ant-design/icons';
import { StarOutline, CouponOutline, ClockCircleOutline, FileOutline, ReceivePaymentOutline } from 'antd-mobile-icons'

export default function index() {
    
    const navigate = useNavigate()
    //商品
    const [goodsls, setGoodsls] = useState([])
    const [page, setPage] = useState(1)
    const [pageSize, setPageSize] = useState(4)
    //换一批
    const huan=()=>{
        if(goodsls.length<4){
            setPage(1)
        }else{
            setPage(page+1)
        }
            

    }

    //请求数据
    const getall=async()=>{
        let {data} = await axios.get('get_goods')
        console.log('请求商品===',data.data);
        let ls =data.data.slice((page-1)*pageSize,page*pageSize)
            setGoodsls(ls)
            console.log('ls===',ls,page);
    }
    useEffect(() => {
        getall()
    },[page])

    const ToBePaid = () => {
        navigate('/ToAllOrderGoods/ToBePaid')
    }
    const ToBeShipped = () => {
        navigate('/ToAllOrderGoods/ToBeShipped')
    }
    const ToBeReceived = () => {
        navigate('/ToAllOrderGoods/ToBeReceived')
    }
    const ToBeEvaluated = () => {
        navigate('/ToAllOrderGoods/MyCompleted')
    }
    const ToRefundService = () => {
        navigate('/ToRefundService')
    }
    const ToSetting = () => {
        navigate('/ToSetting')
    }
    const ToAllOrderGoods = () => {
        navigate('/ToAllOrderGoods')
    }
    const ToCustomerService = () => {
        navigate('/ToCustomerService')
    }
    const ToCollect = () => {
        navigate('/ToCollect')
    }

    return (
        <div>
            <div className='box'>
                <div className='header'>
                    <div className='box-header'>
                        <div className='box-header-left'>
                            <div className='box-header-left-box'>
                                <img src='https://img0.baidu.com/it/u=1362928579,2393938402&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=375' className='box-header-left-img'></img>
                            </div>
                            <div>
                                <p className='box-header-left-p1'>顾洪旭</p>
                                <p>188****2052</p>
                            </div>
                        </div>
                        <div className='box-header-right'>
                            <div className='box-header-right-icons'>
                                <div className='box-header-right-icon1' onClick={ToCustomerService}>
                                    <p className="iconfont"><CustomerServiceOutlined /></p>
                                    <p>客服</p>
                                </div>
                                <div className='box-header-right-icon1' onClick={ToSetting}>
                                    <p className="iconfont"><SettingFilled /></p>
                                    <p>设置</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
            <div className='orderGoods'>
                <div className='orderGoods-header'>
                    <div className='orderGoods-header-left' onClick={ToCollect}>
                        <span className='orderGoods-mobile-img1'><StarOutline /></span>
                        <span className='orderGoods-header-span1'>商品收藏</span>
                    </div>
                    <div className='orderGoods-header-right'>
                        <span className='orderGoods-mobile-img1'><CouponOutline /></span>
                        <span className='orderGoods-header-span1'>卡券包</span>
                    </div>
                </div>
                <hr className='orderGoods-line'></hr>
                <div className='orderGoods-lists'>
                    <div className='orderGoods-lists-header'>
                        <div className='orders-lists-header-left'>
                            <h3>我的订单</h3>
                        </div>
                        <div className='orders-lists-header-right' onClick={ToAllOrderGoods}>
                            <p className='orders-lists-header-right-p1'>全部订单 &gt;</p>
                        </div>
                    </div>
                    <div className='ordereGoods-lists-content'>
                        <div className='orderGoods-lists-content-tag'>
                            <p className='orderGoods-lists-content-tag-img'><CreditCardOutlined /></p>
                            <p className='orderGoods-lists-content-tag-p' onClick={ToBePaid}>待支付</p>
                        </div>
                        <div className='orderGoods-lists-content-tag'>
                            <p className='orderGoods-lists-content-tag-img'><TruckOutlined /></p>
                            <p className='orderGoods-lists-content-tag-p' onClick={ToBeShipped}>待发货</p>
                        </div>
                        <div className='orderGoods-lists-content-tag'>
                            <p className='orderGoods-lists-content-tag-img'><ClockCircleOutline /></p>
                            <p className='orderGoods-lists-content-tag-p' onClick={ToBeReceived}>待收货</p>
                        </div>
                        <div className='orderGoods-lists-content-tag'>
                            <p className='orderGoods-lists-content-tag-img'><FileOutline /></p>
                            <p className='orderGoods-lists-content-tag-p' onClick={ToBeEvaluated}>已完成</p>
                        </div>
                        {/* <div className='orderGoods-lists-content-tag'>
                            <p className='orderGoods-lists-content-tag-img'><ReceivePaymentOutline /></p>
                            <p className='orderGoods-lists-content-tag-p' onClick={ToRefundService}>退款/售后</p>
                        </div> */}
                    </div>
                </div>
                <div className='box1'>
                    <img src="/My1.jpg" alt="" style={{width:'110%',height:'170%'}}/>
                </div>
                <div className='my_goods'>
                    <div className='my_goods_huan'>
                    <h2>猜你喜欢</h2>
                    <span onClick={()=>{huan()}}>换一批</span>
                    </div>
                    <div className='my_goods_item'>
                        {goodsls.map((item,index)=>{
                            return <div key={item._id} className='my_goods_item_box'>
                                <div>
                                <img src={`/img/${item.imgsrc}`} alt="" style={{ width: '100px',height:'100px' }} />
                                </div>
                                <div className='my_goods_item_box_right'>
                                    <h3>{item.name}</h3>
                                    <p>￥{item.price}</p>
                                </div>
                                
                            </div>
                        })}
                    </div>
                </div>
            </div>
            
        </div>
    )
}
